<html>
    <head>
        <title>JavaScript钩子</title>
    </head>
    <body>
        <script>
            // JavaScript钩子
                    /*
                        可以在 atrribute(标签属性)中声明JavaScript钩子：

                            <transition
                                v-on:before-enter="beforeEnter"
                                v-on:enter="enter"
                                v-on:after-enter="afterEnter"
                                v-on:enter-cancelled="enterCancelled"

                                v-on:before-leave="beforeLeave"
                                v-on:leave="leave"
                                v-on:after-leave="afterLeave"
                                v-on:leave-cancelled="leaveCancelled"
                            >

                            </transition>
                    */

                    new Vue({
                                el:'#example-5',
                                data:{

                                },
                                methods: {
                                    // 进入中
                                    beforeEnter: function (el) {
                                        // ...
                                    },

                                    // 当与CSS结合使用，回调函数 done 是可选的
                                    enter:function(del,done){
                                        // ...
                                        done();
                                    },
                                    afterEnter:function(el){
                                        // ...
                                    },
                                    enterCancelled:function(el){

                                    },

                                    // 离开时
                                    beforeLeave:function(el){
                                        // ...
                                    },
                                    // 当与CSS结合使用，回调函数 done 是可选的
                                    leave:function(el,done){
                                        // ...
                                        done();
                                    },
                                    afterLeave:function(el){
                                        // ...
                                    },
                                    leaveCancelled:function(el){

                                    }
                                },
                            })

                    /*
                        这些钩子函数可以结合CSS transition / animation 使用，也可以单独使用。


                        ★、注意：
                                 当只用JavaScript过渡的时候，在 enter 和 leave 中必须使用 done 进行回调。否则，它们将被同步调用，过渡会立即完成。


                                 推荐对于仅使用 JavaScript 过渡的元素添加 v-bind:css="false" ，这样Vue会跳过CSS的检测，这也可以避免过渡过程中 CSS的影响。
                    */

                    // 一个实用Velocity.js(js动画库) 的简单例子
                                /*
                                    --Velocity 和 jQuery.animate 的工作方式类似，也是用来实现 JavaScript 动画的一个很棒的选择--

                                    <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"><-/script>
                                    <div id="example-4">
                                        <button @click="show = !show">
                                            Toggle
                                        </button>
                                        <transition
                                            v-on:before-enter="beforeEnter"
                                            v-on:enter="enter"
                                            v-on:leave="leave"
                                            v-bind:css="false"
                                        >
                                            <p v-if="show">
                                                Demo
                                            </p>
                                        </transition>
                                    </div>
                                */
                               new Vue({
                                   el:'#example-6',
                                   data:{
                                     show:false
                                   },
                                   methods:{
                                       beforeEnter:function(el){
                                            el.style.opacity = 0
                                            el.style.transformOrigin = 'left'
                                       },
                                       enter:function(el,done){
                                            Velocity(el, { opacity: 1, fontSize: '1.4em' }, { duration: 300 })
                                            Velocity(el, { fontSize: '1em' }, { complete: done })
                                       },
                                       leave:function(el,done){
                                            Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 600 })
                                            Velocity(el, { rotateZ: '100deg' }, { loop: 2 })
                                            Velocity(el, {
                                                rotateZ: '45deg',
                                                translateY: '30px',
                                                translateX: '30px',
                                                opacity: 0
                                            }, { complete: done })
                                            }
                                       }
                               });
        </script>
    </body>
</html>